<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收案流程管理</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            max-width: 750px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eaeaea;
        }
        
        .header h1 {
            color: #2c80ff;
            font-size: 22px;
            margin-bottom: 8px;
        }
        
        .header p {
            color: #666;
            font-size: 14px;
        }
        
        .process-flow {
            display: flex;
            justify-content: space-between;
            margin-bottom: 25px;
            position: relative;
        }
        
        .process-flow:before {
            content: '';
            position: absolute;
            top: 15px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #e0e0e0;
            z-index: 1;
        }
        
        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 2;
            flex: 1;
        }
        
        .step-circle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #e0e0e0;
            color: #999;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            margin-bottom: 8px;
            transition: all 0.3s;
        }
        
        .step.active .step-circle {
            background-color: #2c80ff;
            color: white;
        }
        
        .step-label {
            font-size: 12px;
            color: #999;
            text-align: center;
            max-width: 80px;
        }
        
        .step.active .step-label {
            color: #2c80ff;
            font-weight: bold;
        }
        
        .form-container {
            background-color: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            margin-bottom: 20px;
        }
        
        .form-section {
            display: none;
        }
        
        .form-section.active {
            display: block;
        }
        
        .section-title {
            font-size: 18px;
            color: #2c80ff;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .form-group {
            margin-bottom: 18px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 6px;
            font-size: 15px;
            color: #333;
        }
        
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 15px;
            transition: border-color 0.3s;
        }
        
        .form-control:focus {
            border-color: #2c80ff;
            outline: none;
        }
        
        .checkbox-group, .radio-group {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }
        
        .checkbox-item, .radio-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .checkbox-item input, .radio-item input {
            margin-right: 8px;
        }
        
        textarea.form-control {
            min-height: 100px;
            resize: vertical;
        }
        
        .btn-group {
            display: flex;
            justify-content: space-between;
            margin-top: 25px;
        }
        
        .btn {
            padding: 12px 25px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .btn-prev {
            background-color: #f5f7fa;
            color: #666;
            border: 1px solid #ddd;
        }
        
        .btn-next {
            background-color: #2c80ff;
            color: white;
        }
        
        .btn-submit {
            background-color: #00c853;
            color: white;
            width: 100%;
        }
        
        .btn:hover {
            opacity: 0.9;
        }
        
        .required:after {
            content: " *";
            color: #ff4757;
        }
        
        .info-text {
            font-size: 13px;
            color: #666;
            margin-top: 5px;
        }
        
        .document-preview {
            background-color: #f9f9f9;
            border: 1px solid #eaeaea;
            border-radius: 8px;
            padding: 15px;
            margin-top: 15px;
        }
        
        .document-preview h4 {
            margin-bottom: 10px;
            color: #333;
        }
        
        .document-preview p {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
        }
        
        .checkbox-agreement {
            margin-top: 15px;
            display: flex;
            align-items: flex-start;
        }
        
        .checkbox-agreement input {
            margin-right: 10px;
            margin-top: 3px;
        }
        
        .checkbox-agreement label {
            font-size: 14px;
            line-height: 1.5;
        }
        
        .success-message {
            text-align: center;
            padding: 30px 20px;
        }
        
        .success-icon {
            font-size: 60px;
            color: #00c853;
            margin-bottom: 20px;
        }
        
        .success-message h2 {
            color: #00c853;
            margin-bottom: 15px;
        }
        
        .case-number {
            background-color: #f0f7ff;
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
            text-align: center;
        }
        
        .case-number strong {
            color: #2c80ff;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>收案流程管理</h1>
        <p>请按照流程完成收案信息登记</p>
    </div>
    
    <div class="process-flow">
        <div class="step active" data-step="1">
            <div class="step-circle">1</div>
            <div class="step-label">初步接案</div>
        </div>
        <div class="step" data-step="2">
            <div class="step-circle">2</div>
            <div class="step-label">初步筛选</div>
        </div>
        <div class="step" data-step="3">
            <div class="step-circle">3</div>
            <div class="step-label">护士初审</div>
        </div>
        <div class="step" data-step="4">
            <div class="step-circle">4</div>
            <div class="step-label">综合评估</div>
        </div>
        <div class="step" data-step="5">
            <div class="step-circle">5</div>
            <div class="step-label">签署协议</div>
        </div>
        <div class="step" data-step="6">
            <div class="step-circle">6</div>
            <div class="step-label">正式立案</div>
        </div>
    </div>
    
    <div class="form-container">
        <!-- 节点一：初步接案与信息登记 -->
        <div class="form-section active" id="section-1">
            <h2 class="section-title">初步接案与信息登记</h2>
            
            <div class="form-group">
                <label for="service-channel" class="required">服务请求渠道</label>
                <select id="service-channel" class="form-control">
                    <option value="">请选择</option>
                    <option value="phone">电话</option>
                    <option value="online">线上平台</option>
                    <option value="referral">机构转介</option>
                    <option value="other">其他</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="name" class="required">姓名</label>
                <input type="text" id="name" class="form-control" placeholder="请输入服务对象姓名">
            </div>
            
            <div class="form-group">
                <label for="age" class="required">年龄</label>
                <input type="number" id="age" class="form-control" placeholder="请输入年龄">
            </div>
            
            <div class="form-group">
                <label class="required">性别</label>
                <div class="radio-group">
                    <div class="radio-item">
                        <input type="radio" id="male" name="gender" value="male">
                        <label for="male">男</label>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="female" name="gender" value="female">
                        <label for="female">女</label>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label for="contact" class="required">联系方式</label>
                <input type="tel" id="contact" class="form-control" placeholder="请输入手机号码">
            </div>
            
            <div class="form-group">
                <label for="health-needs" class="required">核心健康诉求</label>
                <textarea id="health-needs" class="form-control" placeholder="请详细描述服务对象的健康诉求"></textarea>
            </div>
            
            <div class="btn-group">
                <button class="btn btn-prev" disabled>上一步</button>
                <button class="btn btn-next" data-next="2">下一步</button>
            </div>
        </div>
        
        <!-- 节点二：初步筛选 -->
        <div class="form-section" id="section-2">
            <h2 class="section-title">初步筛选</h2>
            
            <div class="form-group">
                <label for="address" class="required">居住地址</label>
                <input type="text" id="address" class="form-control" placeholder="请输入详细地址">
                <p class="info-text">用于判断是否在服务覆盖区域内</p>
            </div>
            
            <div class="form-group">
                <label class="required">服务项目匹配度</label>
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <input type="checkbox" id="service-1" name="service-match" value="出院后延续护理">
                        <label for="service-1">出院后延续护理</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="service-2" name="service-match" value="携带管路护理">
                        <label for="service-2">携带管路护理</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="service-3" name="service-match" value="行动不便照护">
                        <label for="service-3">行动不便照护</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="service-4" name="service-match" value="慢性病管理">
                        <label for="service-4">慢性病管理</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="service-5" name="service-match" value="其他护理需求">
                        <label for="service-5">其他护理需求</label>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label class="required">是否存在明确的护理需求</label>
                <div class="radio-group">
                    <div class="radio-item">
                        <input type="radio" id="need-yes" name="nursing-need" value="yes">
                        <label for="need-yes">是</label>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="need-no" name="nursing-need" value="no">
                        <label for="need-no">否</label>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label for="screening-notes">筛选备注</label>
                <textarea id="screening-notes" class="form-control" placeholder="如有不符合条件的情况，请在此说明并提供其他资源建议"></textarea>
            </div>
            
            <div class="btn-group">
                <button class="btn btn-prev" data-prev="1">上一步</button>
                <button class="btn btn-next" data-next="3">下一步</button>
            </div>
        </div>
        
        <!-- 节点三：高级实践护士初审 -->
        <div class="form-section" id="section-3">
            <h2 class="section-title">高级实践护士初审</h2>
            
            <div class="form-group">
                <label class="required">需求复杂性评估</label>
                <div class="radio-group">
                    <div class="radio-item">
                        <input type="radio" id="complexity-low" name="complexity" value="low">
                        <label for="complexity-low">简单（单一健康问题）</label>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="complexity-medium" name="complexity" value="medium">
                        <label for="complexity-medium">中等（多个健康问题）</label>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="complexity-high" name="complexity" value="high">
                        <label for="complexity-high">复杂（疑难、多问题交织）</label>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label class="required">风险与收益评估</label>
                <div class="radio-group">
                    <div class="radio-item">
                        <input type="radio" id="benefit-high" name="benefit-risk" value="high-benefit">
                        <label for="benefit-high">高收益，低风险</label>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="benefit-medium" name="benefit-risk" value="medium-benefit">
                        <label for="benefit-medium">中等收益，可控风险</label>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="benefit-low" name="benefit-risk" value="low-benefit">
                        <label for="benefit-low">低收益，高风险</label>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label class="required">服务能力匹配</label>
                <div class="radio-group">
                    <div class="radio-item">
                        <input type="radio" id="match-yes" name="resource-match" value="yes">
                        <label for="match-yes">有相应资源与能力</label>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="match-partial" name="resource-match" value="partial">
                        <label for="match-partial">部分资源可匹配</label>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="match-no" name="resource-match" value="no">
                        <label for="match-no">无相应资源</label>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label for="nurse-assessment">护士评估意见</label>
                <textarea id="nurse-assessment" class="form-control" placeholder="请详细描述专业判断及建议"></textarea>
            </div>
            
            <div class="form-group">
                <label class="required">初审决定</label>
                <div class="radio-group">
                    <div class="radio-item">
                        <input type="radio" id="decision-assess" name="initial-decision" value="assess">
                        <label for="decision-assess">建议深入评估</label>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="decision-reject" name="initial-decision" value="reject">
                        <label for="decision-reject">婉拒服务</label>
                    </div>
                </div>
            </div>
            
            <div class="btn-group">
                <button class="btn btn-prev" data-prev="2">上一步</button>
                <button class="btn btn-next" data-next="4">下一步</button>
            </div>
        </div>
        
        <!-- 节点四：综合评估与需求判定 -->
        <div class="form-section" id="section-4">
            <h2 class="section-title">综合评估与需求判定</h2>
            
            <div class="form-group">
                <label class="required">高级健康评估五维度模型</label>
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <input type="checkbox" id="dimension-1" name="assessment-dimensions" value="生理健康">
                        <label for="dimension-1">生理健康</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="dimension-2" name="assessment-dimensions" value="心理健康">
                        <label for="dimension-2">心理健康</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="dimension-3" name="assessment-dimensions" value="社会功能">
                        <label for="dimension-3">社会功能</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="dimension-4" name="assessment-dimensions" value="环境因素">
                        <label for="dimension-4">环境因素</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="dimension-5" name="assessment-dimensions" value="健康行为">
                        <label for="dimension-5">健康行为</label>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label for="health-problems">初步识别核心健康问题</label>
                <textarea id="health-problems" class="form-control" placeholder="请列出初步识别的核心健康问题"></textarea>
            </div>
            
            <div class="form-group">
                <label class="required">服务需求真实性与紧迫性</label>
                <div class="radio-group">
                    <div class="radio-item">
                        <input type="radio" id="urgency-high" name="urgency" value="high">
                        <label for="urgency-high">高紧迫性</label>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="urgency-medium" name="urgency" value="medium">
                        <label for="urgency-medium">中等紧迫性</label>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="urgency-low" name="urgency" value="low">
                        <label for="urgency-low">低紧迫性</label>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label class="required">是否符合高级实践护理个案标准</label>
                <div class="radio-group">
                    <div class="radio-item">
                        <input type="radio" id="standard-yes" name="meet-standard" value="yes">
                        <label for="standard-yes">符合</label>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="standard-no" name="meet-standard" value="no">
                        <label for="standard-no">不符合</label>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label for="assessment-report">收案评估报告摘要</label>
                <textarea id="assessment-report" class="form-control" placeholder="请简要描述评估结果"></textarea>
            </div>
            
            <div class="btn-group">
                <button class="btn btn-prev" data-prev="3">上一步</button>
                <button class="btn btn-next" data-next="5">下一步</button>
            </div>
        </div>
        
        <!-- 节点五：签署服务协议与知情同意 -->
        <div class="form-section" id="section-5">
            <h2 class="section-title">签署服务协议与知情同意</h2>
            
            <div class="document-preview">
                <h4>服务协议主要内容</h4>
                <p>• 服务内容与频次：详细说明提供的护理服务项目及服务频率</p>
                <p>• 收费标准：明确各项服务的收费标准及支付方式</p>
                <p>• 双方权利义务：明确服务提供方和接受方的权利与义务</p>
                <p>• 潜在风险：说明服务过程中可能存在的风险及应对措施</p>
            </div>
            
            <div class="document-preview">
                <h4>隐私保护政策</h4>
                <p>• 个人信息收集范围：明确收集的个人信息类型及用途</p>
                <p>• 信息保护措施：说明采取的信息安全保护措施</p>
                <p>• 信息使用限制：明确个人信息的使用范围及限制</p>
                <p>• 用户权利：说明用户对个人信息的查询、更正等权利</p>
            </div>
            
            <div class="checkbox-agreement">
                <input type="checkbox" id="agree-service" name="agreement">
                <label for="agree-service">我已阅读并理解《服务协议》全部内容，同意接受协议条款</label>
            </div>
            
            <div class="checkbox-agreement">
                <input type="checkbox" id="agree-privacy" name="agreement">
                <label for="agree-privacy">我已阅读并理解《隐私保护政策》全部内容，同意个人信息处理方式</label>
            </div>
            
            <div class="checkbox-agreement">
                <input type="checkbox" id="agree-informed" name="agreement">
                <label for="agree-informed">我已充分了解服务内容、潜在风险及双方权利义务，自愿接受服务</label>
            </div>
            
            <div class="form-group">
                <label for="signature-name" class="required">签署人姓名</label>
                <input type="text" id="signature-name" class="form-control" placeholder="请输入签署人姓名">
            </div>
            
            <div class="form-group">
                <label for="signature-date" class="required">签署日期</label>
                <input type="date" id="signature-date" class="form-control">
            </div>
            
            <div class="btn-group">
                <button class="btn btn-prev" data-prev="4">上一步</button>
                <button class="btn btn-next" data-next="6">下一步</button>
            </div>
        </div>
        
        <!-- 节点六：正式立案并建立健康档案 -->
        <div class="form-section" id="section-6">
            <h2 class="section-title">正式立案并建立健康档案</h2>
            
            <div class="form-group">
                <label for="case-manager" class="required">个案管理师</label>
                <input type="text" id="case-manager" class="form-control" placeholder="请输入负责的个案管理师姓名">
            </div>
            
            <div class="form-group">
                <label for="service-plan">初步服务计划</label>
                <textarea id="service-plan" class="form-control" placeholder="请简要描述初步制定的服务计划"></textarea>
            </div>
            
            <div class="form-group">
                <label class="required">档案创建状态</label>
                <div class="radio-group">
                    <div class="radio-item">
                        <input type="radio" id="status-created" name="record-status" value="created">
                        <label for="status-created">电子健康档案已创建</label>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="status-pending" name="record-status" value="pending">
                        <label for="status-pending">档案创建中</label>
                    </div>
                </div>
            </div>
            
            <div class="btn-group">
                <button class="btn btn-prev" data-prev="5">上一步</button>
                <button class="btn btn-submit" id="submit-case">提交并完成收案</button>
            </div>
        </div>
        
        <!-- 完成页面 -->
        <div class="form-section" id="section-complete">
            <div class="success-message">
                <div class="success-icon">✓</div>
                <h2>收案流程已完成</h2>
                <p>个案已成功建立并进入"在管"状态</p>
                
                <div class="case-number">
                    <p>个案编号</p>
                    <strong id="generated-case-number">CM20230521001</strong>
                </div>
                
                <p>后续的评估-诊断-计划-实施-评价流程已启动</p>
                <button class="btn btn-next" style="margin-top: 20px;" onclick="resetForm()">处理新个案</button>
            </div>
        </div>
    </div>

    <script>
        // 步骤切换功能
        document.querySelectorAll('.btn-next').forEach(button => {
            button.addEventListener('click', function() {
                const nextSection = this.getAttribute('data-next');
                if (nextSection === '6') {
                    // 如果是最后一步，显示完成页面
                    showSection('complete');
                    updateProgress(6);
                } else {
                    showSection(nextSection);
                    updateProgress(parseInt(nextSection));
                }
            });
        });
        
        document.querySelectorAll('.btn-prev').forEach(button => {
            button.addEventListener('click', function() {
                if (!this.disabled) {
                    const prevSection = this.getAttribute('data-prev');
                    showSection(prevSection);
                    updateProgress(parseInt(prevSection));
                }
            });
        });
        
        function showSection(sectionId) {
            // 隐藏所有部分
            document.querySelectorAll('.form-section').forEach(section => {
                section.classList.remove('active');
            });
            
            // 显示目标部分
            document.getElementById(`section-${sectionId}`).classList.add('active');
        }
        
        function updateProgress(currentStep) {
            // 更新进度指示器
            document.querySelectorAll('.step').forEach(step => {
                step.classList.remove('active');
                const stepNum = parseInt(step.getAttribute('data-step'));
                if (stepNum <= currentStep) {
                    step.classList.add('active');
                }
            });
        }
        
        // 提交表单
        document.getElementById('submit-case').addEventListener('click', function() {
            // 在实际应用中，这里应该有表单验证和数据提交逻辑
            // 这里我们只是模拟提交成功
            showSection('complete');
            updateProgress(6);
            
            // 生成随机个案编号
            const caseNumber = 'CM' + new Date().getFullYear() + 
                              String(new Date().getMonth() + 1).padStart(2, '0') + 
                              String(new Date().getDate()).padStart(2, '0') + 
                              Math.floor(Math.random() * 1000).toString().padStart(3, '0');
            document.getElementById('generated-case-number').textContent = caseNumber;
        });
        
        // 重置表单
        function resetForm() {
            // 在实际应用中，这里应该重置所有表单字段
            // 这里我们只是返回到第一步
            showSection('1');
            updateProgress(1);
        }
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            updateProgress(1);
        });
    </script>
</body>
</html>